<template>
  <div class="topToolBox addEditDialog w_100 h_100">     
      <!-- <a @click="newsDialog('消息通知')" class="info"><img src="../assets/images/info.png" alt=""><el-badge is-dot class="item"></el-badge></a> -->
      <el-dropdown trigger="click">
        <a class="el-dropdown-link" style="margin-right:40px;"><img src="../assets/images/my.png" alt=""></a>
      
        <el-dropdown-menu slot="dropdown">
          <!-- <el-dropdown-item><p @click="resetPass">个人中心</p></el-dropdown-item> -->
          <el-dropdown-item ><p @click="loginDialogVisible=true">退出</p></el-dropdown-item>        
        </el-dropdown-menu>
      </el-dropdown>

    <!-- 退出弹窗 -->
     
      <el-dialog
        title="退出登录"
        :visible.sync="loginDialogVisible"
        width="20%"
        left>
        <span style="padding-left:30px;font-size:16px">确定账号退出登录吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="loginDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="loginOut">确 定</el-button>
        </span>
      </el-dialog>
      
    <!-- <news ref="detailDialogNews" @fatherMethod="searchList" :detailDialogNews="detailDialogNews"></news> -->
  </div>
</template>

<script>
import { mapState } from 'vuex';
// import news from '@/components/news';
export default {
  name: 'news',
  // components:{news},
  data () {
    return {
      // detailDialogNews:false
      loginDialogVisible: false,
      loginOutUrl:'/logout'    
    }
  },
  methods: {
    loginOut(){
       this.$store.dispatch('postform',{param:'',url:this.loginOutUrl}).then(() => {
          if(this.addEdit.code==0){
            this.$message({
              message: this.addEdit.msg,
              type: 'success'
            });               
            this.dialogVisible=false;  
            this.$router.push({  // 登录成功  路由跳转
              path: "/"
            }); 
            localStorage.clear('token'); 
             //localStorage.removeItem('token');                           
          }else{
             this.$message({
              message: this.addEdit.msg,
              type: 'warning'
            }); 
          }              
        }).catch(() => {
             this.$message({
              message: this.addEdit.msg,
              type: 'error'
            }); 
            
        })                 
        
    },
    resetPass(){
      this.$router.push({  // 登录成功  路由跳转
        path: "/home/accountInfo"
      });

    }
      // searchList(){       
      //   this.$store.dispatch('getlist',{param:'',url:''}); 
      // },
      // newsDialog(title){
      //   this.detailDialogNews=true;
      //   this.$refs.detailDialogPower.loadDialogData(title);    
      // }
    
          
  },
  created(){
                 
  }, 
  computed:{
    
    ...mapState(['addEdit'])
  },
    
}
</script>

<style lang="less" scoped>

.topToolBox{
  background:#09419D;
  height:80px;
  text-align: right;
  padding-right:40px;
  box-sizing: border-box;
  a{
    display: inline-block;
    position:relative;
    width: 30px;
    height: 30px;
    margin-top: 30px;
    i{
      font-size: 36px;
      color:#21D274;
      margin-top:42px;
      margin-left:123px;
    }
    .el-badge {
      position:absolute;
      right:0px;
      top: -8px;
    }
    img{
      width: 100%;      
    }
  }
  .info{
    margin-right:120px;
  }
 
  
}

</style>
<style>   
 .topToolBox .el-dialog__body{
    text-align: left;
  }
</style>

